<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">周杰伦</button>
    <script>
        var btn = document.querySelector('#btn');

        btn.onclick = function () {
            console.log("青花瓷");
        }
       /*
              函数：是一件事情。
              调用函数，执行了某个事情。
              京东页面，
              点击顶部，页面滚动到最上面。
              点击页面，播放下一张图片。
              鼠标放在我的京东，就显示某些信息。
              鼠标点击，按下键盘，右键，鼠标移动，缩放浏览器。
              点击了按钮，触发一个函数
 
              事件：在特定情况下触发的函数。

              事件三要素：
                  1. 事件源：事件被触发的对象
                  2. 事件类型：如何触发这个事件 (点击、移动鼠标)
                  3. 事件处理程序：具体执行的函数，做了什么事情。
         */
    </script>
</body>
</html>